import { Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolMatting.module.less";
import { TooltipProps } from "antd/lib/tooltip"; // 新增导入
import PickingPortraits from "./PickingPortraits/PickingPortraits";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import clsx from "clsx";

// 抠图按钮
export default function ToolMatting() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [data, setData] = useState({});
  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [loadding, setLoadding] = useState(false);
  const [allowNumber, setAllowNumber] = useState(0);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  const tooltipProps: TooltipProps = {
    // open: true,
    overlayInnerStyle: {
      backgroundColor: 'white',
      // boxShadow: '0px 0px 0px 1px #fd7901'
    },
    onOpenChange(visible) {
      setHover(visible);
    },
    color: 'white', // 设置小三角形的颜色为白色
    trigger: 'click',
  };

  return (
    <Tooltip
      title={
        <div>
          {/* // 扣人像 */}
          <PickingPortraits />
        </div>
      }

      {...tooltipProps} // 应用自定义样式
    >
      <div
        ref={dom}
        className={clsx(styles.toolMatting, visible && styles.visible, disable && styles.disable, hover && styles.hover)}
      >
        抠图
      </div>
    </Tooltip>
  );

}